<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="no-referrer"/>
    <title>HuskyMovie</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/vue.js"></script>
    <style>
        .button {
            --color: #F6F8FF;
            --color-hover: #F6F8FF;
            --color-active: #fff;
            --icon: #E1E6F9;
            --icon-hover: #ECEFFC;
            --icon-active: #fff;
            --background: #404660;
            --background-hover: #393E57;
            --background-active: #275EFE;
            --shadow: rgba(0, 17, 119, 0.1);
            display: inline-block;

            outline: none;
            cursor: pointer;
            position: relative;
            border: 0;
            background: none;
            padding: 8px 12px 8px 22px;
            border-radius: 9px 0 0 9px;
            line-height: 27px;
            font-family: inherit;
            font-weight: 600;
            font-size: 14px;
            color: var(--color);
            -webkit-appearance: none;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.2s linear;
            -webkit-clip-path: inset(0px 4px 0px 0px);
        }

        .button:hover {
            --icon: var(--icon-hover);
            --color: var(--color-hover);
            --background: var(--background-hover);
        }

        .button:active {
            --scale: .95;
        }

        .button:not(.liked):hover {
            --hand-rotate: 8deg;
            --hand-thumb-1: -12deg;
            --hand-thumb-2: 36deg;
        }

        .button.liked {
            --span-x: 2px;
            --span-d-o: 1;
            --span-d-x: 0;
            --icon: var(--icon-active);
            --color: var(--color-active);
            --background: var(--background-active);
            --hand-name: hand;
        }

        .button:after {
            content: "";
            min-width: 10px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border-radius: inherit;
            transition: background 0.2s linear, transform 0.2s, box-shadow 0.2s linear;
            transform: scale(var(--scale, 1)) translateZ(0);
            background: var(--background);
            box-shadow: 0 4px 8px var(--shadow), 0 8px 20px var(--shadow);
        }

        .button .emitter {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateZ(-4px);
        }

        .button .emitter div {
            width: 6px;
            height: 6px;
            margin: -3px 0 0 -3px;
            border-radius: 2px;
            position: absolute;
            left: 0;
            top: 0;
            transform-style: preserve-3d;
            background: var(--b, none);
        }

        .button .hand {
            width: 11px;
            height: 11px;
            border-radius: 2px 0 0 0;
            background: var(--icon);
            margin: 10px 8px 0 0;
            transform-origin: -5px -1px;
            transition: transform 0.25s, background 0.2s linear;
            transform: rotate(var(--hand-rotate, 0deg)) translateZ(0);
            -webkit-animation: var(--hand-name, none) 0.5s linear;
            animation: var(--hand-name, none) 0.5s linear;
        }

        .button .hand:before, .button .hand:after {
            content: "";
            background: var(--icon);
            position: absolute;
            transition: background 0.2s linear, box-shadow 0.2s linear;
        }

        .button .hand:before {
            left: -5px;
            bottom: 0;
            height: 12px;
            width: 4px;
            border-radius: 1px 1px 0 1px;
        }

        .button .hand:after {
            right: -3px;
            top: 0;
            width: 4px;
            height: 4px;
            border-radius: 0 2px 2px 0;
            background: var(--icon);
            box-shadow: -0.5px 4px 0 var(--icon), -1px 8px 0 var(--icon), -1.5px 12px 0 var(--icon);
            transform: scaleY(0.6825);
            transform-origin: 0 0;
        }

        .button .hand .thumb {
            background: var(--icon);
            width: 10px;
            height: 4px;
            border-radius: 2px;
            transform-origin: 2px 2px;
            position: absolute;
            left: 0;
            top: 0;
            transition: transform 0.25s, background 0.2s linear;
            transform: scale(0.85) translateY(-0.5px) rotate(var(--hand-thumb-1, -45deg)) translateZ(0);
        }

        .button .hand .thumb:before {
            content: "";
            height: 4px;
            width: 7px;
            border-radius: 2px;
            transform-origin: 2px 2px;
            background: var(--icon);
            position: absolute;
            left: 7px;
            top: 0;
            transition: transform 0.25s, background 0.2s linear;
            transform: rotate(var(--hand-thumb-2, -45deg)) translateZ(0);
        }

        .button .hand,
        .button span {
            z-index: 1;
            position: relative;
            display: inline-block;
            vertical-align: top;
        }

        .button .hand span,
        .button span span {
            opacity: var(--span-d-o, 0);
            transition: transform 0.25s, opacity 0.2s linear;
            transform: translateX(var(--span-d-x, 4px)) translateZ(0);
        }

        .button > span {
            transition: transform 0.25s;
            transform: translateX(var(--span-x, 4px)) translateZ(0);
        }
    </style>
</head>
<body>
<div id="box">
    <div v-for="items in forYou">
        <div>{{items.title}}</div>
        <!--    <button v-if="status?fun1($event):fun2($event)" @click="fun1($event)">Test Button</button>-->
        <div v-if="items.is_like" class="btn-group btn-group-sm" style="z-index: 100">
            <button :id="items.button1" class="button"
                    @click="buttonclick_up($event)" style="z-index: 100">
                <div class="emitter"></div>
                <div class="hand">
                    <div class="thumb"></div>
                </div>
            </button>

            <button id="button_4" class="button"
                    @click="buttonclick_down($event)"
                    style="transform: rotate(180deg);margin-left: -10px;z-index: 100">
                <div class="emitter"></div>
                <div class="hand">
                    <div class="thumb"></div>
                </div>
            </button>
        </div>


        <div v-else-if="!items.is_like" class="btn-group btn-group-sm" style="z-index: 100">
            <button class="button"
                    @click="buttonclick_up($event)" style="z-index: 100">
                <div class="emitter"></div>
                <div class="hand">
                    <div class="thumb"></div>
                </div>
            </button>

            <button id="button_2" class="button"
                    @click="buttonclick_down($event)"
                    style="transform: rotate(180deg);margin-left: -10px;z-index: 100">
                <div class="emitter"></div>
                <div class="hand">
                    <div class="thumb"></div>
                </div>
            </button>
        </div>

        <div v-else class="btn-group btn-group-sm" style="z-index: 100">
            <button id="button_5" class="button"
                    @click="buttonclick_up($event)" style="z-index: 100">
                <div class="emitter"></div>
                <div class="hand">
                    <div class="thumb"></div>
                </div>
            </button>

            <button class="button" :id="items.button2"
                    @click="buttonclick_down($event)"
                    style="transform: rotate(180deg);margin-left: -10px;z-index: 100">
                <div class="emitter"></div>
                <div class="hand">
                    <div class="thumb"></div>
                </div>
            </button>
        </div>
        <!--        <button @click="button">123</button>-->
    </div>
</div>


<script>


    var vue = new Vue({
        el: "#box",
        data: {
            status: 1,
            cid: "button_6",
            movie_list: [],
            forYou: [],
        },

        methods: {
            fun1: function (e) {
                console.log("f1")
                console.log(e)
            },
            fun2: function (e) {
                console.log("f2")
                console.log(e)
            },
            buttonclick_up(e) {
                console.log(e);
                e.currentTarget.nextElementSibling.classList.remove("liked");
                // console.log(it);
                // this.thumbs_up(it);
                // document.getElementById("myDIV")
                e.target.classList.toggle("liked");
                // document.getElementById("likebtn").classList.toggle("liked");
                // document.getElementById("likebtn").classList.toggle("liked");
                // document.getElementById("likebtn").classList.toggle("liked");
                if (e.target.classList.contains("liked")) {
                    setTimeout(() => {
                        // particles(
                        //     button.querySelector(".emitter"),
                        //     100,
                        //     0,
                        //     0,
                        //     360,
                        //     button.offsetWidth
                        // );
                    }, 10);
                }
            },
            buttonclick_down(e) {
                console.log(e);
                e.currentTarget.previousElementSibling.classList.remove("liked");
                // console.log(it);
                // this.thumbs_down(it);
                // document.getElementById("myDIV")
                e.target.classList.toggle("liked");

                if (e.target.classList.contains("liked")) {
                    setTimeout(() => {
                        // particles(
                        //     button.querySelector(".emitter"),
                        //     100,
                        //     0,
                        //     0,
                        //     360,
                        //     button.offsetWidth
                        // );
                    }, 10);
                }
            },
        },

        mounted: function () {
            // b3=document.getElementById("button_3")
            // b6=document.getElementById("button_6")
            // if(b3!=null){
            //     b3.classList.toggle("liked")
            // }
            // if(b6!=null){
            //     b6.classList.toggle("liked")
            // }
            // document.getElementById("button_3").classList.toggle("liked");
            // document.getElementById("button_6").classList.toggle("liked");

            var user_movie = new FormData()
            user_movie.append('username', "husky");
            user_movie.append('token', 'MTYyNjk0NTMzMy43NzgyOTg2OjMwOTNhMzYwNjk4YTYyMDliYWIxNTg0MGQ3N2UwOWRhZjVmYWMwYzE=');

            var host = 'http://124.70.36.92:19132/';
            var url_movie = host + 'authorities/movielist/'

            axios({
                method: 'POST',
                url: url_movie,
                // url: 'http://124.70.36.92:19132/polls/login/',
                dataType: 'json',
                data: user_movie,
            }).then(res => {
                if (res.data.msg === '非法访问') {
                    window.location.href = "login.html";
                } else {
                    console.log("从user_movie获得到了数据，让stat=0")
                    console.log(res.data.recommends);
                    this.movie_list = res.data.recommends.slice(1,);
                    this.forYou = res.data.recommends.slice(0, 1);
                    this.forYou_name = this.forYou[0].categoryName;
                    this.forYou = this.forYou[0].movies;
                    console.log('foryou:' + this.forYou);
                    console.log('ml:' + this.movie_list)
                    console.log('be:' + this.items)
                    this.load_stat = 0;

                    console.log("hanshu")
                    console.log(this.forYou)
                    // for(i=0;i<this.forYou.length;i++){
                    //     console.log(this.forYou[i].button1)
                    //     b3=document.getElementById(this.forYou[i].button1)
                    //     b3.classList.toggle("liked")
                    // }
                }
            }).catch(err => {
                console.log(err)
            })


        },

        updated: function () {
            for (i = 0; i < this.forYou.length; i++) {
                console.log(this.forYou[i].button1)
                b3 = document.getElementById(this.forYou[i].button1)
                if (b3 != null)
                    b3.classList.toggle("liked")
                b6 = document.getElementById(this.forYou[i].button2)
                if (b6 != null)
                    b6.classList.toggle("liked")
            }
        },
        // 计算调用的
        computed: {},
        // 监听 数据的变化
        watch: {}

    })

</script>

</body>
</html>
